<template>
  <section class="pagemaker-relate">
    <section class="top">
      <div class="label">当表单元素</div>
      <el-select v-model="currentId" style="width: 100%" @change="handleChange">
        <el-option v-for="(item, index) in selectList" :key="index" :label="item.name" :value="item.value" />
      </el-select>
    </section>
    <template v-if="currentId != null">
      <section class="body">
        <div class="left">
          <div class="label">条件</div>
          <el-select v-model="leftValue" style="width: 100%" @change="change">
            <el-option v-for="(item, index) in left" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </div>
        <div v-if="leftValue" class="middle">
          <template v-if="leftValue === 'change'">
            <el-table :data="mapList">
              <el-table-column label="关联组件变量">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.leftVar" style="width: 100%" @change="changeSelect">
                    <el-option v-for="(item, index) in selectVar4left" :key="index" :label="item.name" :value="item.code" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="本组件变量">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.rightVar" style="width: 100%" @change="changeSelect">
                    <el-option v-for="(item, index) in selectVar4right" :key="index" :label="item.name" :value="item.code" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="font-size: 14px"
                    @click="handleDel(scope)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button v-if="selectVar4left.length > mapList.length" class="add-rules" size="mini" @click="addRules">添加</el-button>
          </template>
          <component :is="middleType" v-else ref="middle" :is-init-data="true" :option="Object.assign(middleOption,{value:middleValue,required:true})" />
        </div>
        <div class="right">
          <div class="label">操作</div>
          <el-select v-model="rightValue" style="width: 100%" @change="change">
            <el-option v-for="(item, index) in right" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </div>
      </section>
    </template>
  </section>
</template>
<script>
import VSelect from '@/components/CustomPage/fields/widget/select'
import VField from '@/components/CustomPage/form/field'
export default {
  name: 'PagemakerRelate',
  components: { VField },
  inject: ['getListItemInfo', 'focusId', 'getCompObj'],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      vselect: VSelect,
      fields: this.option.fields || [],
      value: this.option.value || null,
      left: [],
      right: [],
      rightValue: '',
      leftValue: '',
      middleValue: '',
      middleType: null,
      middleOption: {},
      middleValueType: null,
      currentId: null,
      mapList: [],
      selectVar4left: [],
      selectVar4right: [],
      selfComInfo: {}
    }
  },
  computed: {
    selectList() {
      return this.fields.map(a => {
        return { name: a.field.label, value: a.field.id }
      })
    }
  },
  mounted() {
    this.selfComInfo = this.getCompObj(this.focusId())
    this.selectVar4right = this.getListItemInfo(this.selfComInfo.option.name)?.componentVariable ? JSON.parse(this.getListItemInfo(this.selfComInfo.option.name).componentVariable) : []
    this.init()
  },
  methods: {
    init() {
      if (this.value && this.fields.length > 0) {
        const index = this.fields.findIndex(a => a.field.id === this.value.id) > -1 ? this.fields.findIndex(a => a.field.id === this.value.id) : 0
        this.onselected(this.fields[index].field.id)
      }
    },

    handleChange(e) {
      this.onselected(e)
    },

    onselected(id) {
      const info = this.fields.find(a => a.field.id === id)
      const { type, option, valueType, typeName } = info.field
      this.middleOption = option
      this.middleType = type
      this.middleValueType = valueType
      this.currentId = info.field.id
      this.right = this.getListItemInfo(this.selfComInfo.option.name)?.associationAction ? JSON.parse(this.getListItemInfo(this.selfComInfo.option.name)?.associationAction) : []
      /* [
        { name: '显示', value: 1 },
        { name: '隐藏', value: 2 },
        { name: '禁用', value: 3 },
        { name: '必填', value: 4 },
        { name: '非必填', value: 5 },
        { name: '非禁用', value: 6 },
        { name: '刷新', value: 7 }
      ]*/
      this.left = this.getListItemInfo(typeName)?.correlationCondition ? JSON.parse(this.getListItemInfo(typeName).correlationCondition) : [] // info.operator
      if (this.value && this.value.id === id) {
        const { operate, value, display } = this.value
        this.rightValue = display
        this.leftValue = operate
        this.change()
        this.middleValue = operate === 'change' ? JSON.parse(value) : value
        this.mapList = operate === 'change' ? JSON.parse(value) : []
      } else {
        this.rightValue = this.right.length ? this.right[0].value : ''
        this.leftValue = this.left.length ? this.left[0].value : ''
        this.middleValue = ''
        this.mapList = []
      }
    },

    getValue() {
      const left = this.leftValue
      const right = this.rightValue
      const middle = left === 'change' ? JSON.stringify(this.mapList) : this.$refs.middle.getValue()
      return {
        id: this.currentId,
        operate: left,
        value: middle,
        valueType: this.middleValueType,
        display: right
      }
    },

    setValue(data) {
      const { id } = data
      const index = this.fields.findIndex(a => a.field.id === id)
      if (index !== -1) {
        this.onselected(id)
      }
    },

    check() {
      if (this.leftValue === 'change') {
        if (this.currentId === null || this.leftValue === '' || this.rightValue === '' || this.mapList.length === 0 || this.mapList.some(item => { return item.leftVar === '' || item.rightValue === '' })) {
          this.$message.error('关联组件配置数据不能为空')
          return false
        } else {
          return true
        }
      } else {
        return Promise.resolve().then(() => this.$refs.middle.check()).then(result => {
          return result
        })
      }
    },

    change() {
      if (this.leftValue === 'change') {
        const info = this.fields.find(a => a.field.id === this.currentId)
        const { typeName } = info.field
        this.selectVar4left = this.getListItemInfo(typeName)?.componentVariable ? JSON.parse(this.getListItemInfo(typeName).componentVariable) : []
      }
      this.dispatch_event('filed-value-change', '')
    },
    changeSelect() {
      this.dispatch_event('filed-value-change', '')
    },
    addRules() {
      this.mapList.push({
        leftVar: '',
        rightVar: ''
      })
      this.dispatch_event('filed-value-change', '')
    },
    handleDel(info) {
      this.mapList.splice(info.$index, 1)
      this.dispatch_event('filed-value-change', '')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/field.scss';
.pagemaker-relate {
  .top {
    margin-bottom: 5px;
    .label {
      @include label();
    }
  }

  .body {
    display: flex;
    flex-wrap: wrap;
    .label {
      @include label();
    }
    .left {
      width: 100%;
    }
    .middle {
      width: 100%;
      flex: 1;
      margin: 10px 0;
      .add-rules {
        height: 44px;
        width: 100%;
        border: 1px dotted $a3;
      }
    }
    .right {
      width: 100%;
    }
    .dot {
      width: 20px;
      text-align: center;
      margin-top: 10px;
      &::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background: $a1;
        display: inline-block;
        border-radius: 50%;
      }
    }
  }
}
</style>
